<template>
	<div class="home">
		<el-dialog custom-class="lxfs" title="联系方式" :visible.sync="dialogVisible" width="30%">
			<wImage :image="dialogVisible_image"></wImage>
		</el-dialog>
		<el-dialog custom-class="notice" :visible.sync="notice.dialogVisible" width="40%">
			<h4 slot="title"><i class="fa fa-volume-down"></i>{{notice.title}}</h4>
			<div class="content">{{notice.content}}</div>
		</el-dialog>
		<banner isHome="true"></banner>
		<div class="site-content animate">
			<!--综合资讯-->
			<div class="aaa">
				<sectionTitle><i class="fa fa-volume-down" aria-hidden="true"></i>综合资讯</sectionTitle>
				<div class="hoot">
					<el-container>
						<el-aside width="300px">
							<h2>我的名片</h2>
							<div>
								<p>姓名:吴东哲</p>
								<p>年龄:22</p>
								<p>邮箱:1328113017@qq.com</p>
								<p>手机:13268515903</p>
								<p>
									<el-tooltip class="item" effect="dark" content="添加qq" placement="top-start">
										<el-button
											@click="dialogVisible=true;dialogVisible_image='https://www.wayblogs.com/layuibokemoban/image/page/f4791e4145fde9b59a5914bdf08b075.png'">
											<i class="iconfont iconqq fa-2x"></i>
										</el-button>
									</el-tooltip>
									<el-tooltip class="item" effect="dark" content="添加微信" placement="top-start">
										<el-button
											@click="dialogVisible=true;dialogVisible_image='https://www.wayblogs.com/layuibokemoban/image/page/f57d72993b36f26177a37af9b104097.jpg'">
											<i class="fa fa-weixin fa-2x"></i>
										</el-button>
									</el-tooltip>
								</p>
							</div>
						</el-aside>
						<el-main>
							<el-tabs v-model="ab" @tab-click="ab1">
								<el-tab-pane label="公告" name="0">
								</el-tab-pane>
								<el-tab-pane label="头条" name="1"></el-tab-pane>
								<el-tab-pane label="热门" name="2"></el-tab-pane>
							</el-tabs>
							<div class="ab">
								<ul>
									<li v-for="(item,index) in notices" @mouseover="notice_index = index"
										:class="{active:notice_index == index}">
										<template v-if="ab == 0">
											<a
												@click="notice.dialogVisible=true;notice.content=item.content;notice.title=item.title">
												{{index+1}}.
												{{item.title}}
											</a>
										</template>
										<template v-else>
											<a target="_blank" :href="`/article/${item.id}`">
												{{index+1}}.
												{{item.title}}
											</a>
										</template>
										<p>{{item.desc || item.abstract1}}</p>
									</li>
								</ul>
							</div>
						</el-main>
					</el-container>
				</div>
			</div>
			<!-- 全部博文 -->
				<div class="bbb">
					<div id="tj_articles">
						<sectionTitle>{{articles_title}}<a v-if="categoryId != 0"><i class="el-icon-refresh-left"
									@click="ref"></i></a></sectionTitle>
						<noContent :condition="postList.length > 0">
							<post v-for="(item,index) in postList" :post="item"></post>
						</noContent>
						<div style="text-align: center;margin-top: 20px;">
							<el-pagination @current-change="handleSizeChange" background
								layout="prev, pager, next" :total="article_total" :page-size="pageSize"
								:hide-on-single-page="true" :current-page.sync="currPage"
								:pager-count="5">
							</el-pagination>
						</div>
					</div>
					<div class="sp">
						<!-- LOL资讯 -->
						<div class="sp1">
							<sectionTitle>LOL资讯</sectionTitle>
							<noContent :condition="lols.data.length > 0">
								<div v-for="item in lols.data" class="item">
									<a target="_blank"
										:href="'https://lol.qq.com/news/detail.shtml?type=3&docid='+item.iDocID"></a>
									<div class="left">
										<wImage :image="item.sIMG"></wImage>
									</div>
									<div class="right">
										<h6>{{item.sTitle}}</h6>
										<p class="autor">
											<wImage :image="item.avatar || item.sIMGNew" class="avatar"></wImage>
											{{item.sAuthor}}
										</p>
									</div>
									<!-- https://lol.qq.com/v/v2/detail.shtml?type=3&docid=751781857943828914 -->
									<!-- https://lol.qq.com/news/detail.shtml?type=3&docid=10857340235165312472 -->
									<!-- https://lol.qq.com/news/detail.shtml?type=3&docid=10857340235165312472 -->
								</div>
							</noContent>
							<div style="text-align: center;margin-top: 20px;">
								<el-pagination @current-change="handleSizeChange2" background layout="prev, next"
									:total="lols.total" :page-size="lols.pageSize" :hide-on-single-page="true"
									:current-page.sync="lols.currPage" :pager-count="5">
								</el-pagination>
							</div>
						</div>
						<div class="yl">
							<sectionTitle>经典语录</sectionTitle>
								<div class="yl_item">
									两条相交的路，其中一条，注定要终结
								</div>
						</div>
						<div class="fk">
							<sectionTitle>访客足迹</sectionTitle>
							<noContent :condition="visitor.data.length > 0">
								<div class="fk_item" v-for="(item,index) in visitor.data">
									<el-tooltip effect="dark"
										:content="'访客:'+item.userName+'于'+item.updateDate+'访问您的博客'"
										placement="top-start">
										<wImage :image="item.userImage"></wImage>
									</el-tooltip>
								</div>
							</noContent>
							<div style="text-align: center;margin-top: 20px;">
								<el-pagination @current-change="visitor_handleSizeChange" background
									layout="prev, pager, next" :total="visitor.total" :page-size="visitor.pageSize"
									:hide-on-single-page="true" :current-page.sync="visitor.currPage" :pager-count="5">
								</el-pagination>
							</div>
						</div>
						<!-- 广告 -->
						<advertisement></advertisement>
					</div>
				</div>
		</div>
	</div>
</template>

<script>
	import home from '@/assets/js/home.js'
	export default {
	  name: 'home',
	  mixins: [
	    home
	  ],
	  mounted () {
	  },
	  beforeDestroy () {
	  }
	}
</script>
<style lang="less" src="@/assets/css/home.less"></style>
<style src="@/assets/alibaba/iconfont.css"></style>
<style scoped="scoped" lang="less" src="@/assets/css/home_scoped.less">
</style>
